<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>v-text_指令</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
             我们学过的指令:
                  v-bind   :   单向绑定解析表达式, 可简写为:xxx
                  v-model  :   双向绑定
                  v-for    ：   遍历数组,字符串，对象
                  v-on     ：   绑定事件监听, 可简写为:@xxx
                  v-if     :    条件渲染 (动态控制节点是否存在)
                  v-else   :    条件渲染 (动态控制节点是否存在) 
                  v-show   :    条件渲染 (动态控制节点是否展示)


             现在学的指令: 
                v-text    :   1、向其所在元素中渲染文本内容。 2、与插值语法不同: v-text会替换掉节点中的内容   
                v-html    :       
         -->

		<div id="root">
			<div>你好啊,{{name}}</div>
			<div v-text="name"></div>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					name: 'xiaomo'
				}
			})
		</script>
	</body>
</html>
